<template>
  <div style="color: red">history与location</div>
  <br />

  <button @click="back">back</button>
  <button @click="go">go</button>

  <br />
  <div>location</div>
  <p>
    1.Location.href:整个url
    例如：http://127.0.0.1:5173/#/progressManager/history
  </p>
  <p>2.Location.protocol:当前url的协议（包括冒号：） 例如：http:</p>
  <p>
    3.Location.host 主机 如果端口不是协议默认的80和433，则还会包括冒号和端口
    例如：127.0.0.1:5173
  </p>
  <p>4.Location.hostname:主机名不包括端口 例如：127.0.0.1</p>
  <p>5.Location.port:端口号 例如：5173</p>
  <p>6.Location.pathname:url的路劲部分，从根路径/开始</p>
  <p>7.Locaiton.search:查询字符串部分，从？开始</p>
  <p>8.Locaiton.hash:片段字符串，从#开始</p>
  <p>9.Location.origin:url的协议，主机名和端口 例如：http://127.0.0.1:5173</p>
</template>

<script setup lang="ts" name="Bubbling">
const History = window.history;

const back = () => {
  History.back();
};

const go = () => {
  History.go(-2);
};
const Location = window.location;
console.log("整个url", Location.href);
console.log("当前url协议", Location.protocol);
console.log("主机", Location.host);
console.log("主机名", Location.hostname);
console.log("端口号", Location.port); //5173
console.log("url路径部分", Location.pathname); //5173
console.log("查询字符串部分", Location.search);
console.log("片段字符串，从#开始", Location.hash);
console.log("URL的协议主机名和端口", Location.origin);
</script>

<style scoped lang="scss"></style>
